<template>
  <div id="container">
  </div>
</template>

<script setup>
import { onMounted, onUnmounted} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { useMapDataStore } from '../stores/mapData';
const mapDataStore = useMapDataStore();
let map = null;
let geocoder = null;
// const props = defineProps(['initMap'])
const props = defineProps({
  initMap:{
    type:Array,
    required:true
  }
})
console.log(props.initMap);


onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "5cbcb20da8e8a5e32b4dbc94ce998648",
  };
  AMapLoader.load({
    key: "eee3b10541dc4bb182f006458ed27a4d", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，添加 Geocoder 插件
  })
    .then((AMap) => {
      console.log("初始化地图中心店：");
      console.log(props.initMap[0], props.initMap[1]);
      
      map = new AMap.Map("container", {
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        // center: [116.397428, 39.90923],
        center: [props.initMap[0], props.initMap[1]],  // 初始化地图中心点位置
      });
        console.log("AADD");
      geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: "all"
      });
  
      map.on('click', function (e) {
        const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
        console.log('经纬度:', lnglat);
        geocoder.getAddress(new AMap.LngLat(lnglat[0],lnglat[1]), function (status, result) {
     
          
          if  (status === 'complete' && result.info === 'OK') { 
            console.log("aaaa");
            
            const address = result.regeocode.formattedAddress;
            const  province = result.regeocode.addressComponent.province;
            const city = result.regeocode.addressComponent.district;
            const data = {address,province, city,lnglat}
            mapDataStore.setMapData(data)
            // console.log("城市");
            // console.log(city);
            console.log("城市");
            console.log(data);
            
          }
          
        });
      });
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style>
#container {
  width: 100%;
  height: 80vh;
}
</style>